<template>
	<draggable
		class="list"
		v-model="cascade.children"
		@drop.native.stop.prevent=""
		handle=".move"
	>
	<template v-for="one in cascade.children">
		<item
			:item="one"
			:key="one.key"
			:configLevel="configLevel"
			:deleteItem="deleteItem"
			v-if="one.isDelete !== 1"
			@click.native.stop="clickItem(one)"
			:isActive="currentSelect === one.key"
			:deep="deep"
		></item>
	</template>
		<div slot="footer">
			<span
				v-if="!cascade.children || cascade.children && cascade.children.length === 0"
				class="empty"
			>请新建</span>
			<el-link
				class="add"
				type="info"
				:underline="false"
				@click.stop="add(cascade)"
			>新建{{deep + 1}}级项</el-link>
		</div>
	</draggable>
</template>

<script lang="ts">
import { Component, Vue, Prop, Ref } from 'vue-property-decorator';
import draggable from 'vuedraggable';
import { uuid } from '@/utils/common';
import item from './item.vue';
@Component({
  name: 'cascadeSetting',
  components: {
    draggable,
    item
  }
})
export default class extends Vue {
  @Prop({ default: 1 }) private configLevel!: number;
  @Prop() private cascade!: any;
  @Prop({ default: 0 }) private deep!: number;
  private currentSelect: any = '';
  private add (cascade) {
    cascade.children = cascade.children || [];
    cascade.children.push({
      key: uuid(),
      value: '',
      children: null,
      level: this.deep + 1,
      isDelete: 0,
      isNew: true
    });
  }

  private clickItem (one) {
    this.currentSelect = one.key;
  }

  private deleteItem (one) {
    if (one.isNew) {
      const index = this.cascade.children.findIndex(({ key }) => one.key === key);
      this.cascade.children.splice(index, 1);
      if (!this.cascade.children.length) {
        this.cascade.children = null;
      }
    } else {
      one.isDelete = 1;
    }
  }
}
</script>

<style lang="stylus" scoped>
	.list {
		height 100%
		overflow-y auto
		padding-bottom 32px
		box-sizing border-box
	}
	.empty {
		position absolute
		width 100%
		color #8c8c8c
		margin-top -16px
		text-align center
	}
	.add {
		position absolute
		width 100%
		bottom 0
		text-align center
		background-color #fff
		border-top 1px solid #e6e6e6
	}
</style>
